import pinia from '../stores';
import { fontSizeStore } from '../stores/store';

//需要创建pinia，此时main.js的pinia未构建
const store = fontSizeStore(pinia);
/**
 * 设置根节点fontsize
 * @param {*设计稿中1rem的大小} baseSize
 */
function setRem() {
    // const fs = getComputedStyle(window.document.documentElement)['font-size'].replace('px','');
    const baseSize = store.baseSize;
    // 实际设备页面宽度和设计稿的比值
    const scale = document.documentElement.clientWidth / 375;
    store.setBaseSize(baseSize);
    // 计算实际的rem值并赋予给html的font-size
    document.documentElement.style.fontSize = Math.round(baseSize * scale) + 'px';
}

setRem();

window.addEventListener('resize', () => {
    setRem();
});

/**
 * 适配px
 * @param {设计稿尺寸px} fontSize
 * @returns 根据机型大小和根节点大小返回的适配尺寸
 */
function rpx(fontSize) {
    const clientWidth =
        window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (!clientWidth) return;
    const baseSize = store.baseSize;
    // 实际设备页面宽度和设计稿的比值
    const scale = clientWidth / 375;
    // 实际设备页面根节点和设计稿根节点的比值
    const fsScale = baseSize / 16;
    return scale * fontSize * fsScale;
}

export { setRem, rpx };
